<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas实现逐帧动画效果</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
	</style>
</head>
<body>
	
	<div class="ani-box"></div>

<script type="text/javascript">
	;
(function() {


    //1.创建要加载的图片
    var imgs = function() {
        var fileList = [

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/c4edd146ecdf09c566cf6a66caad92f6.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/d533ff3299980bc5694c2facae101923.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/b2faaf152464107cf7c06be3b422c756.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/8dd1b0748220f1ed51d491ff20764b0f.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/a265eb140f3d6079b1e8d54190b8128d.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/579988a624c35ae5f977e0a885a38b53.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/e7d6545529733a127be4ce811b547510.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/58187d2dd2c4dd2da1b2bac94f6eaa08.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/1378938444b3fec6d36ea8ad6f5535c0.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/63c9436be9bdf2de46e05244219fea64.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/e8e0d794076f5d417958cb3c88203acd.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/20db6fd49a5b23a03fa902f276230767.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/df428d0869a2cd1ed9db3eb48676a740.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/fe3af58c052a6c3379235091a444a108.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/0ac42aa3304089232eb05dd081a36b3a.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/4fe3134b488540f65d75fe75f728b1a5.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/96054bdc218ddd90bba745552aab6544.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/980758fd3b9f3183889469e9cc49d6c9.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/8ff22ae7df6540d4543b185ca785e2d8.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/c309d9e003298815737922e434256bd1.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/d2b21ad88b1e84a11349fc7f4b2ffbc2.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/cd003118abfc285882dfc0a53d40f79f.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/a423ca728ad26642bd74edce34236dad.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/741df7fe770f494373b9d97eb7dde377.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/7cae71b7eed1430b02a8b2c84d4bec7d.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/36ff380ea79b6e5d8caa763a9fceb63c.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/90bb2e676d37fe28d54ba600f612956a.jpg",

		   "https://res.wx.qq.com/wechatgame/tmt/dora/312/uploads/e3624761005081cf5cc44656f096e855.jpg",

		];
        return fileList;
    }

    //2.加载图片
    var loadImgs = function(fn) {
        var loaded = 0; //记录已经加载图片的个数
        var loadedImgsArr = []; //用来存放加载的图片
        var imgsArr = imgs();
        var imgObj = null;
        imgsArr.forEach(function(value, index, arr) {
            imgObj = new Image();
            imgObj.onload = function() {
                loaded++;
                //这里所有的图片加载完成
                if (loaded == imgsArr.length) {
                    fn && fn(loadedImgsArr);
                }
            }
            imgObj.src = imgsArr[index];
            loadedImgsArr.push(imgObj);
        });
    }

    //3.配置参数
    var config = {
        fps: 20, //帧率
        parentBox: document.querySelectorAll('.ani-box')[0]
    }

    //4.创建canvas
    var createCanvas = function() {
        var canvas = document.createElement('canvas');
        config.parentBox.appendChild(canvas);
        var { offsetWidth, offsetHeight } = canvas.parentNode;
        canvas.width = document.documentElement.clientWidth;;
        canvas.height = document.documentElement.clientHeight;;

        return canvas;
    }

    //5.有了图片和canvas对象，创建动画函数
    var ani = function(imgsArr, cb) {
        var canvas = createCanvas();
        //图片的宽高
        var offsetWidth = imgsArr[0].width;
        var offsetHeight = imgsArr[0].height;
        var ctx = canvas.getContext('2d');

        var n = 0;

        var timer = setInterval(function() {

            //清屏
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            //绘制图片        
            ctx.drawImage(
                imgsArr[n],
                0, 0, offsetWidth, offsetHeight,
                0, 0, canvas.width, canvas.height
            );

            n++;

            //播放到最后一张图片
            if (n == imgsArr.length) {
                n = 0;
                cb && cb(timer);
            }

        }, 1000 / config.fps);
    }

    var init = function() {
        //加载图片，执行动画
        loadImgs(function(imgs) {
            ani(imgs, function(timer) {
                //播放完停留在最后一张
                //clearInterval(timer);
            });
        });
    }

    init();

})();
</script>
</body>
</html>